<template>
  <details-layout left-title="进出港详情">
    <ul class="head">
      <li class="head-left">
        <span class="sign">始</span>
        <span class="title">{{traceData.detail.cfcs}}</span>
        <span class="time">{{traceData.detail.lgsj}}</span>
      </li>
      <li class="head-hr">
        <span class="type-text">&nbsp;</span>
        <hr>
        <span class="type-number">{{traceData.zybm}}</span>
      </li>
      <li class="head-right">
        <span class="title">{{traceData.detail.ddcs}}</span>
        <span class="sign">终</span>
        <p class="time">{{traceData.detail.jgsj}}</p>
      </li>
    </ul>

    <ul class="box target-head">
      <cardBlock class="car-item" :imgUrl="img ? `${BASE64_TYPE}${img}` : '/static/default/head.png'">
        <div slot="name" class="card-name">
          <strong class="name">{{traceData.detail.xm}}</strong>
        </div>
        <!-- <div slot="tags" class="card-tags">
          <span class="tag">团伙</span><span class="tag">布控</span>
        </div> -->
        <div class="info-grid " slot="data">
          <div class="grid-item align-left">
            <em>性别</em><span>{{traceData.detail.xb}}</span>
            <em>座位号</em><span>{{traceData.detail.zwh}}</span>
          </div>
          <div class="grid-item align-left">
            <em>身份证号</em><span style="color:#5077aa" v-init-tooltips="{
                  bsh: traceData.detail.sfzh,
                  bshlx: '001',
                  dalx: 'RY'
                }">{{traceData.detail.sfzh}}</span>
          </div>
          <div class="grid-item align-left">
            <em>登机时间</em>
            <span>{{traceData.detail.lgsj}}</span>
          </div>
        </div>
      </cardBlock>
    </ul>

    <detailsGroup title="以下是同航班人员" :list-length="data.length">
      <ul class="same-car-list">
        <cardBlock class="car-item" :imgUrl="item.xp ? `${BASE64_TYPE}${item.xp}` : '/static/default/head.png'" v-for="(item,index) in data" :key="index">
          <div slot="name" class="card-name">
            <strong class="name">{{item.xm}}</strong>
          </div>
          <div slot="badage">
            <span class="badage">{{item.cbscs}}</span>
          </div>
          <div slot="tags" class="card-tags">
            <span class="tag"  v-for="(item1,index1) in item.bs" :key="index1">{{item1}}</span>
          </div>
          <div class="info-grid " slot="data">
            <div class="grid-item align-left">
              <em>性别</em><span>{{item.xb}}</span>
              <em>座位号</em><span>{{item.zwh}}</span>
            </div>
            <div class="grid-item align-left">
              <em>身份证号</em><span style="color:#5077aa" v-init-tooltips="{
                  bsh: item.sfzh,
                  bshlx: '001',
                  dalx: 'RY'
                }">{{item.sfzh}}</span>
            </div>
            <div class="grid-item align-left">
              <em>登机时间</em>
              <span>{{traceData.detail.lgsj}}</span>
            </div>
          </div>
        </cardBlock>
      </ul>
    </detailsGroup>
  </details-layout>
</template>

<script>
  import detailsLayout from '../../components/details-layout'
  import detailsGroup from '../../components/details-group'
  import cardBlock from '../../components/card-block'
  import { mapState } from 'vuex'
  import request from '../../helper/request'
  
  export default {
    name: 'vehicleDetails',
    components: {
      detailsLayout,
      detailsGroup,
      cardBlock
    },
    directives: {},
    mixins: [],
    data() {
      return {
        data: []
      }
    },
    computed: {
      ...mapState('personStore', {
        traceData: 'traceData',
        img: 'img',
        name: 'name'
      })
    },
    watch: {},
    methods: {
      async getData() {
        let txjzq = await request('people/gj_thb', 'SC040803', {sfzh: '000000', swsj: '20160103112200', xwsj: '20160103113200'})
        this.data = txjzq.tgxArr
        console.log(this.data)
      }
    },
    created() {
      this.getData()
    }
  }
</script>

<style scoped lang="scss">
  @import '../../style/public';

  .target-head {
    margin: 0 1.2rem 0;
  }

  .badage {
    background-color: #f76500;
    color: #fff;
    float: right;
    padding: 0.1rem 0.2rem;
    font-size: .8rem;
    line-height: 1.3;
  }

  .head {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 1.2rem 1.6rem;
    overflow: hidden;
    background-color: #f0f4ff;
    > li {
      position: relative;
      text-align: center;
      font-weight: bold;
      > .sign {
        display: block;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        color: #fff;
        line-height: 2;
        font-weight: normal;
      }
      > .title {
        line-height: 2rem;
        text-indent: .2rem;
      }
      > .time {
        position: absolute;
        top: 2.2rem;
      }
    }
    &-left {
      flex-grow: 1;
      > .sign {
        float: left;
        background-color: #ff8041;
      }
      > .title {
        float: left;
      }
      > .time {
        left: -1rem;
      }
    }
    &-right {
      flex-grow: 1;
      > .sign {
        float: right;
        background-color: #009865 !important;
      }
      > .title {
        float: right;
      }
      > .time {
        right: -1rem;
      }
    }
    &-hr {
      flex-grow: 1;
      > .type-text {
        color: #969a9d;
      }
      > .type-number {
      }
      > hr {
        margin: 0;
        color: #75797c;
        &:after {
          border-top: 1px solid #75797c;
          width: 1rem;
          height: 1rem;
          content: ' ';
          position: absolute;
          right: .2rem;
          top: .9rem;
          transform: rotate(45deg);
        }
      }
    }
  }
</style>
